<!DOCTYPE html>
<html
  layout:decorator="components/layout"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
>
<head>
  <title>VPN管理</title>
</head>
<body>
<div
  layout:fragment="content"
  id="app" v-cloak
>
  <div>
    <!--引入边框角-->
    <div class="container">

      <div class="myHeader">
        <div class="myHeader-title">
          VPN管理
        </div>
        <div class="myHeader-tool">

          <el-button
            type="primary"
            size="mini"
            @click="_forward('/network-config/add/admin_vpn_add')"
            v-realm="'network-configuration:net-vpn-info:edit'"
          >添加隧道
          </el-button>
        </div>
      </div>

      <my-table
        :data="page.records"
        :columns="columns"
        @handle-selection-change="selection"
        @handle-sort-change="sortChange"
      >
        <template #operating="row">
          <el-button
            type="primary"
            size="mini"
            @click.stop.prevent="updateForward(row.row)"
            v-realm="'network-configuration:net-vpn-info:edit'"
          >修改
          </el-button>
          <el-button
            type="danger"
            size="mini"
            @click.stop.prevent="deleteOne(row.row)"
            v-realm="'network-configuration:net-vpn-info:edit'"
          >移除
          </el-button>
        </template>
      </my-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="changeSize"
          @current-change="goto"
          :current-page="page.current"
          :page-sizes="[10, 20, 30]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
      <div class="pagination-tool">
        <el-button
          type="danger"
          size="mini"
          @click="deleteSelected"
          v-realm="'network-configuration:net-vpn-info:edit'"
        >批量删除
        </el-button>
      </div>
    </div>
  </div>

</div>
<div layout:fragment="js">
  <script src="/static/js/module/network-config/api/netVpnInfoApi.js"></script>
  <script src="/static/js/module/network-config/admin_vpn.js"></script>
</div>
</body>
</html>
